<template>
  <div class="weather-container">
    <mt-header fixed title="天气" class="header"></mt-header>
    <Row class="content-row">
      <Col span="24" class="swiper-container">
        <mt-swipe :auto="4000" class="swiper">
          <mt-swipe-item>
            <img class="swiper-img" v-lazy="'/images/wea/1.jpg'" />
          </mt-swipe-item>
          <mt-swipe-item>
            <img class="swiper-img" v-lazy="'/images/wea/2.jpg'" />
          </mt-swipe-item>
          <mt-swipe-item>
            <img class="swiper-img" v-lazy="'/images/wea/3.jpg'" />
          </mt-swipe-item>
        </mt-swipe>
      </Col>
      <Col span="24" class="search-container">
        <img v-lazy="'/images/logo.png'" class="logo" />
        <h3>天气查询</h3>
        <Input
          search
          enter-button
          placeholder="请输入城市名称"
          v-model="cityName"
          @on-search="changePage"
        />
      </Col>
      <Col span="24" class="news-container">
        <News />
      </Col>
    </Row>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
import News from "./News.vue";
export default {
  data() {
    return {
      cityName: "",
    };
  },
  components: {
    News,
  },
  methods: {
    changePage() {
      if (!this.cityName) {
        MessageBox("提示", "请输入城市名称");
      } else {
        this.$store.commit("cityNameMutation", encodeURI(this.cityName));
        this.$store.dispatch("queryCity").then(() => {
          if (this.$store.state.cityExist) {
            this.$router.push(`/detail/${encodeURI(this.cityName)}`);
            this.cityName = "";
          } else {
            MessageBox("提示", "抱歉，暂不支持该城市");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.weather-container {
  background-color: #f9f9f9;
  padding-top: 50px;
}
.header {
  background-color: #11aa66;
}
.content-row {
  margin: 20px 0;
}
.swiper-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.swiper {
  width: 100%;
  max-width: 600px;
  height: 300px;
}
.swiper-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.search-container {
  text-align: center;
  margin-bottom: 20px;
}
.logo {
  display: block;
  width: 60px;
  margin: 10px auto;
}
h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}
.news-container {
  padding: 0 20px;
}
</style>
